<template>
  <div class="approve-team-container">
    <el-card v-loading="loading" class="approve-card">
      <template #header>
        <div class="card-header">
          <span>团队认证</span>
          <div v-if="teamUuid" class="team-info">团队ID：{{ teamUuid }}</div>
        </div>
      </template>
      <div class="card-content">
        <template v-if="loading">
          <el-icon class="loading-icon">
            <Loading />
          </el-icon>
          <span>正在处理您的团队认证请求，请稍候...</span>
        </template>
        <template v-else>
          <el-result
            :icon="resultIcon"
            :status="resultStatus"
            :title="resultTitle"
            :sub-title="resultSubTitle"
          />
        </template>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { Loading } from "@element-plus/icons-vue";
import { joinTeam } from "@/api";

const route = useRoute();
const loading = ref(false);
const resultStatus = ref<"success" | "error" | "info">("info");
const resultTitle = ref("处理中");
const resultSubTitle = ref("");
const teamUuid = ref("");

const resultIcon = computed(() => {
  return resultStatus.value;
});

onMounted(async () => {
  // 获取完整的URL
  const fullUrl = window.location.href;
  console.log("完整URL:", fullUrl);

  // 提取所有查询参数部分
  const paramsString = fullUrl.split("#/ApproveTeam?")[1];
  console.log("参数字符串:", paramsString);

  if (!paramsString) {
    resultStatus.value = "error";
    resultTitle.value = "参数错误";
    resultSubTitle.value = "无法获取参数";
    return;
  }

  // 处理可能存在的双问号情况
  const cleanParamsString = paramsString.replace("?code=", "&code=");
  console.log("处理后的参数字符串:", cleanParamsString);

  const params = new URLSearchParams(cleanParamsString);
  const uuid = params.get("uuid");
  const code = params.get("code");

  if (uuid) {
    teamUuid.value = uuid;
  }

  console.log("解析的参数:", { uuid, code });

  if (!code || !uuid) {
    resultStatus.value = "error";
    resultTitle.value = "参数错误";
    resultSubTitle.value = "缺少必要的参数";
    return;
  }

  try {
    loading.value = true;
    const res = await joinTeam({
      code: code,
      team_uuid: uuid
    });

    if (res.status === "success") {
      resultStatus.value = "success";
      resultTitle.value = "申请成功";
      resultSubTitle.value = "您的加入申请已提交，请等待管理员审批";
    } else {
      resultStatus.value = "error";
      resultTitle.value = "申请失败";
      resultSubTitle.value = res.msg || "申请失败，请稍后重试";
    }
  } catch (error: any) {
    resultStatus.value = "error";
    resultTitle.value = "操作失败";
    resultSubTitle.value = error.message || "发生未知错误，请稍后重试";
  } finally {
    loading.value = false;
  }
});
</script>

<style lang="scss" scoped>
.approve-team-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f5f7fa;

  .approve-card {
    width: 500px;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .team-info {
        font-size: 12px;
        color: #666;
      }
    }

    .card-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;

      .loading-icon {
        margin-bottom: 16px;
        font-size: 24px;
        animation: rotate 1s linear infinite;
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
